<template>
	<view class="create-order">
		<view class="select" v-if="parentdata.amount >= parentdata.ziti">
			<view :class="{selectview: select == 1}" @click="select = 1">送货上门</view>
			<view :class="{selectview: select == 2}" @click="select = 2">到店自提</view>
		</view>
		<!-- 选择地址 -->
		<view class="create-order__box" @click="toEditAddress" v-if="select == 1">
			<view v-if="defAddress.name" class="create-order__selected">
				<view class="create-order__selected__top">{{ defAddress.name }} {{ defAddress.phone }}</view>
				<view class="create-order__selected__bot">{{ defAddress.area }}{{ defAddress.address }}</view>
			</view>
			<view v-else class="create-order__noaddress">请选择收货地址</view>
			<image class="create-order__selectAddress__icon" mode="widthFix"
				:src="$imgUrl('/order/createorder/icon-right.png')"></image>
		</view>

		<view v-if="select == 2" class="create-order__box">
			<view class="create-order__selected">
				<view class="create-order__selected__top" style="display: flex;justify-content: flex-start;">
					<view
						style="margin-top: 6rpx;font-size: 24rpx;width: 56rpx;height: 38rpx;background-color: #2FCC71;color: #ffffff;margin-right: 10rpx;display: flex;justify-content: center;align-items: center;">
						商家</view>
					<view style="width: 515rpx;">{{parentdata.address}}</view>
				</view>
				<image class="create-order__selectAddress__icon" mode="widthFix"
					:src="$imgUrl('/order/createorder/icon-right.png')"></image>
			</view>
		</view>

		<!-- 商品明细 -->
		<view class="create-order__box">
			<view class="create-order__sendtime">预计次晨达9:00 次日达16:00前送达</view>
			<view class="goods-list__box" v-for="(item, index) in stCreateOrderData" :key="index">
				<image class="goods-list__box__image" :src="item.recPic" mode="widthFix"></image>
				<view class="goods-list__box__right">
					<view class="goods-list__box__top">
						<view class="goods-list__box__title">{{ item.name }}</view>
					</view>
					<view class="goods-list__box__bot">
						<view class="pricebox">
							<view class="goods-list__box__unitPrice"><span>￥</span>{{ item.unitPrice.toFixed(2) }}
							</view>
							<!-- <view class="goods-list_price" v-if="item.vip">
								<view class="pricetitle">VIP</view>
								<view class="youhuiprice">￥<text>{{Number(item.vip).toFixed(2)}}</text></view>
							</view> -->
						</view>
						<view class="goods-list__box__number">x{{item.count}}</view>
					</view>
				</view>
			</view>
			<!-- 超出3种商品 -->
			<view v-if="createOrderData.length > 3" class="create-order__over" @click="showMore = !showMore">
				{{ showMore ? '收起' : '展开'}}(共{{ count }}件)
				<image class="create-order__over__icon" :class="showMore ? 'tr2' : 'tr'" mode="widthFix"
					:src="$imgUrl('/order/createorder/icon-right.png')"></image>
			</view>
		</view>

		<!-- 订单金额价格 -->
		<view class="create-order__box">
			<view class="create-order__box__price amount">
				<view class="label">订单总额</view>
				<view class="price">
					<span>￥</span>{{ select == 1 ? Number(parentdata.amount).toFixed(2) :Number(parentdata.amount - parentdata.deliveryCharge).toFixed(2) }}
				</view>
			</view>
			<view class="create-order__box__price">
				<view class="label">商品金额</view>
				<view class="price"><span>￥</span>{{ Number(parentdata.originalPrice).toFixed(2) }}</view>
			</view>
			<!-- <view class="create-order__box__price">
				<view class="label">VIP立减</view>
				<view class="price color1">
					-<span>￥</span>{{ parentdata.vip == 0 || parentdata.ed == 0 ? 0.00 : Number(parentdata.liSheng).toFixed(2) }}
				</view>
			</view> -->
			<view class="create-order__box__price">
				<view class="label">配送费</view>
				<view class="price">
					<span>￥</span>{{ select == 1 ? Number(parentdata.deliveryCharge).toFixed(2) : 0.00 }}
				</view>
			</view>
			<view class="create-order__box__price">
				<view class="label">服务费</view>
				<view class="price"><span>￥</span>{{ Number(parentdata.serviceCharge).toFixed(2) }}</view>
			</view>
		</view>

		<!-- 备注 -->
		<!-- <view class="create-order__box flex">
				<view class="create-order__box__remark">订单备注</view>
				<textarea class="create-order__box__textarea" placeholder="请输入订单备注" />
			</view> -->

		<!-- 固底提交按钮 -->
		<view class="create-order__btn">
			<view class="create-order__btn__text">共{{ count }}件，合计：<span class="unit">¥</span><span
					class="price">{{ select == 1 ? Number(parentdata.amount).toFixed(2) :Number(parentdata.amount - parentdata.deliveryCharge).toFixed(2) }}</span>
			</view>
			<view class="create-order__btn__pay" @click="toCreateOrderPay">提交订单</view>
		</view>
		<uni-popup ref="popup" :is-mask-click="false">
			<view class="totalbox">
				<view class="title">开通会员享商品会员价本单<text>立省{{Number(parentdata.liSheng).toFixed(2)}}元</text></view>
				<view class="btnbox">
					<view class="btnlist" style="background-color: #F5F7FB;color: #000000;" @click="close">忽略</view>
					<view class="btnlist"
						style="background-image: linear-gradient(to bottom,#F3B258,#ED6E37);color: #ffffff;"
						@click="tourl">开通</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" :is-mask-click="false">
			<view class="totalbox1">
				<view class="image"></view>
				<view class="title1">订单已满足自提条件</view>
				<view class="title2">选择<text>自提立省{{Number(parentdata.deliveryCharge).toFixed(2)}}元配送费</text></view>
				<view class="title3">自提点：{{parentdata.address}}</view>
				<view class="btn1" @click="xstotal1(1)">自提</view>
				<view class="btn2" @click="xstotal1(2)">配送</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" :is-mask-click="false">
			<view class="totalbox">
				<view class="title" style="font-size: 36rpx;padding: 0 50rpx;top: 285rpx;">订单额度不足不能享受会员价
					充值完成，本单<text>立省{{Number(parentdata.liSheng).toFixed(2)}}元</text></view>
				<view class="btnbox">
					<view class="btnlist" style="background-color: #F5F7FB;color: #000000;" @click="close1">忽略</view>
					<view class="btnlist"
						style="background-image: linear-gradient(to bottom,#F3B258,#ED6E37);color: #ffffff;"
						@click="tourl1">充值</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		accAdd,
		accMul,
		accSub
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				addressList: [],
				defAddress: {},
				showMore: false,
				favourPrice: 0,
				amountPirce: 0,
				unitPrice: 0,
				count: 0,
				amountlist: {},

				parentdata: {},
				select: 1,
				arrids: []
			}
		},

		computed: {
			...mapState(['createOrderData']),
			stCreateOrderData() {
				if (this.showMore) {
					return this.createOrderData
				} else {
					return this.createOrderData.slice(0, 3)
				}
			}
		},
		onLoad(option) {
			this.arrids = JSON.parse(option.data)
			console.log(JSON.parse(option.data))
			console.log(this.arrids, 'vip啦啦啦')
			this.getAddressList()
			this.getUserInfo()

		},
		onReady() {
			console.info(this.createOrderData)
			this.getPirce()
			this.$apis.goods.goodsAmount().then(res => {
				console.log(res)
				this.amountlist = res.data
			})
		},
		onShow() {

			this.$apis.order.createOrder({
				type: 0,
				ids: this.arrids,
				delivery: 0,
			}).then(res => {
				console.log(res, 213123)
				if (res.code == 500) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.parentdata = res.data
				// if (this.parentdata.vip == 0) {
				// 	this.$refs.popup.open()
				// 	return
				// }
				// if (this.parentdata.ed == 0) {
				// 	this.$refs.popup3.open()
				// 	return
				// }
				if (this.parentdata.ed == 0) {
					this.$refs.popup1.open()
				}
			})
		},
		methods: {
			...mapActions(['getUserInfo']),
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			close() {
				this.$refs.popup.close()
				if (this.parentdata.amount >= this.parentdata.ziti) {
					setTimeout(() => {
						this.$refs.popup1.open()
					}, 1000)
				}
			},
			close1() {
				this.$refs.popup3.close()
			},
			xstotal1(i) {
				if (i == 1) {
					this.select = 2;
				} else {
					this.select = 1;
				}
				this.$refs.popup1.close()
			},
			tourl() {
				// this.$refs.popup.close()
				setTimeout(() => {
					this.$refs.popup.close()
					// this.$refs.popup1.open()
				}, 1000)
				uni.navigateTo({
					url: '/pages/mine/member/spay'
				})
			},
			tourl1() {
				setTimeout(() => {
					this.$refs.popup3.close()
				}, 1000)
				uni.navigateTo({
					url: '/pages/mine/member/edpay'
				})
			},
			async getAddressList() {
				const data = await this.$apis.address.getAddress()
				this.addressList = data.data
				for (let i = 0; i < this.addressList.length; i++) {
					if (this.addressList[i].def == 1) {
						this.defAddress = this.addressList[i]
					}
				}
			},
			toEditAddress() {
				uni.$on('selectUser', this.updataUser)
				uni.navigateTo({
					url: '/pages/address/index'
				})
			},
			updataUser(val) {
				console.log(val);
				this.defAddress = val
			},
			jianamount(amount) {
				var price = 0
				if (this.amountlist && this.amountlist.manjians == undefined) {
					return 0
				}
				try {
					this.amountlist.manjians.forEach((item, index) => {
						if (amount >= item.man) {
							price = item.jian
							throw new Error('error')
						}
					})
				} catch (e) {
					if (e.message == 'false') {
						return
					}
				}

				return price
			},
			getPirce() {
				let amount = 0
				let count = 0
				for (let i = 0; i < this.createOrderData.length; i++) {
					amount = accAdd(amount, accMul(this.createOrderData[i].count, this.createOrderData[i].unitPrice))
					count += this.createOrderData[i].count
				}
				this.count = count
				this.unitPrice = amount
				this.amountPirce = accSub(this.unitPrice, this.favourPrice)
			},
			async toCreateOrderPay() {
				let arr = []
				for (let i = 0; i < this.createOrderData.length; i++) {
					arr.push(this.createOrderData[i].id)
				}

				let ids = arr.join(',')
				const typeA = uni.getStorageSync('typeA') || ''
				uni.showLoading({
					mask: true
				})
				let params = {
					addressId: this.defAddress.id,
					ids,
					type: 1,
					delivery: this.select == 1 ? 0 : 1,
					orderType: typeA == 2 ? 1 : 0
				}
				const data = await this.$apis.order.createOrder(params)
				if (typeA == 2 || typeA == 1) {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/order/paySuccess/index'
					})
				} else {
					if (data.code == 200) {
						// 创建成功
						const res = await this.$apis.order.getWxpay({
							code: data.data.code,
							payType: 0
						})
						uni.requestPayment({
							provider: "wxpay",
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							timeStamp: res.data.timeStamp,
							paySign: res.data.sign,
							signType: res.data.signType,
							success(res) {
								uni.navigateTo({
									url: '/pages/order/paySuccess/index'
								})
							},
							fail(e) {
								uni.navigateTo({
									url: '/pages/order/orderList/index'
								})
							}
						})
					} else {
						uni.hideLoading()
					}
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.create-order {
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 98rpx;
		background: #F6F6F6;

		.select {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			width: 100%;
			margin-bottom: 20rpx;

			view {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #666666;
				height: 88rpx;
				box-sizing: border-box;
				width: 50%;
			}

			.selectview {
				color: #2FCC71;
				position: relative;

				&::after {
					height: 4rpx;
					content: '';
					width: 128rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -64rpx;
					background-color: #2FCC71;
				}
			}
		}

		.create-order__box {
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
			margin-bottom: 20rpx;

			&.flex {
				display: flex;
				justify-content: space-between;
			}
		}

		.create-order__selectAddress__icon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			top: 50%;
			right: 24rpx;
			transform: translateY(-50%);
		}

		.create-order__noaddress {
			font-size: 30rpx;
			color: #666666;
		}

		.create-order__selected__top {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 45rpx;
			margin-bottom: 16rpx;
		}

		.create-order__selected__bot {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}

		.create-order__sendtime {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			line-height: 42rpx;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #E2E2E2;
		}

		.goods-list__box {
			width: 100%;
			height: 168rpx;
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;

			.goods-list__box__image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 12rpx;
			}

			.goods-list__box__right {
				width: 502rpx;
				height: 144rpx;
				padding-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-bottom: 1rpx solid #E2E2E2;
			}

			.goods-list__box__title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				width: 100%;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-list__box__bot {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pricebox {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.goods-list__box__unitPrice {
				font-size: 36rpx;
				font-weight: bold;
				color: #FB4041;

				span {
					font-size: 26rpx;
				}
			}

			.goods-list_price {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 6rpx;
				margin-left: 20rpx;

				.pricetitle {
					width: 60rpx;
					height: 32rpx;
					color: #FBE6C7;
					font-size: 24rpx;
					background-color: #3F3F47;
					border-radius: 6rpx 0 0 6rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.youhuiprice {
					background-color: #FBE6C7;
					font-size: 20rpx;
					padding: 0 8rpx;
					height: 32rpx;
					color: #3F3F47;
					box-sizing: border-box;
					font-weight: 600;
					border-radius: 0 6rpx 6rpx 0;

					text {
						font-size: 26rpx;
					}
				}
			}
		}

		.create-order__over {
			margin-top: 12rpx;
			margin-bottom: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #999999;

			.create-order__over__icon {
				width: 44rpx;
				height: 44rpx;
				margin-left: 16rpx;

				&.tr {
					transform: rotate(90deg);
				}

				&.tr2 {
					transform: rotate(-90deg);
				}
			}
		}

		.create-order__box__price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16rpx;

			&.amount {
				padding-bottom: 24rpx;
				margin-bottom: 8rpx;
				border-bottom: 1rpx solid #E2E2E2;
				margin-top: 0rpx !important;

				.label {
					font-size: 30rpx !important;
				}

				.price {
					font-size: 30rpx !important;

					span {
						font-size: 24rpx !important;
					}
				}
			}

			.label {
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}

			.price {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 30rpx;

				&.color1 {
					color: #FB4041;
				}

				span {
					font-size: 22rpx;
				}
			}
		}

		.create-order__box__remark {
			width: 130rpx;
			font-size: 30rpx;
			color: #666666;
		}

		.create-order__box__textarea {
			width: 500rpx;
			height: 150rpx;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
		}


		.create-order__btn {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 5;
			width: 706rpx;
			height: 96rpx;
			padding: 0 20rpx 0 24rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.create-order__btn__text {
				font-size: 24rpx;
				color: #666666;

				.unit {
					color: #FB4041;
				}

				.price {
					font-size: 36rpx;
					color: #FB4041;
				}
			}

			.create-order__btn__pay {
				width: 206rpx;
				height: 74rpx;
				background: #2FCC71;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-left: 16rpx;
			}
		}

		.totalbox {
			width: 606rpx;
			height: 674rpx;
			background-image: url(https://bhzhtc.oss-cn-beijing.aliyuncs.com/sxsd/cc2f350dd83b48019a78dde38f1a4ab0.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;

			.title {
				position: absolute;
				bottom: 235rpx;
				padding: 0 73rpx;
				box-sizing: border-box;
				font-weight: 700;
				font-size: 46rpx;
				color: #333333;
				text-align: center;

				text {
					color: #FB4041;
				}

			}

			.btnbox {
				position: absolute;
				bottom: 48rpx;
				width: 100%;
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 45rpx;
				box-sizing: border-box;

				.btnlist {
					width: 242rpx;
					height: 88rpx;
					border-radius: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: 700;
				}
			}
		}

		.totalbox1 {
			height: 852rpx;
			width: 606rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			padding-top: 10rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.image {
				width: 382rpx;
				height: 272rpx;
				background-image: url(https://bhzhtc.oss-cn-beijing.aliyuncs.com/sxsd/01839f70b946462f811380bbe39a95a7.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.title1,
			.title2,
			.title3 {
				color: #333333;
				font-size: 36rpx;
				margin-top: 20rpx;
				font-weight: 700;

				text {
					color: #FB4041;
				}
			}

			.title3 {
				font-weight: 600;
				margin-top: 48rpx;
				width: 510rpx;
				text-align: center;
				font-weight: 500;
			}

			.btn1,
			.btn2 {
				width: 510rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.btn1 {
				margin-top: 56rpx;
				background-color: #2FCC71;
				color: #FFFFFF;
			}

			.btn2 {
				margin-top: 24rpx;
				background-color: #F5F7FB;
				color: rgba(0, 0, 0, .8);
				font-weight: 700;
			}
		}
	}
</style>